<template>
    <div
      :id="`mars3d-container${mapKey}`"
      :class="['mars3d-container', customClass, { 'mars3d-container-compare-rh': compare }]"
    ></div>
  </template>
  
  <script>
  import Vue from "vue";
  
  // 使用免费开源版本
  import "mars3d/dist/mars3d.css";
  import * as mars3d from "mars3d";
  
  // 导入插件(其他插件类似，插件清单访问：http://mars3d.cn/dev/guide/start/install.html)
  // echarts插件
  // import 'mars3d-echarts'
  
  // 为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用
  Vue.prototype.mars3d = mars3d;
  Vue.prototype.Cesium = mars3d.Cesium;
  
  export default {
    name: "mars3dViewer",
  
    props: {
      // 初始化配置参数
      url: String,
  
      // 地图唯一性标识
      mapKey: {
        type: String,
        default: "",
      },
  
      // 自定义参数
      options: Object,
  
      // 是否分屏显示
      compare: {
        type: Boolean,
        default: false,
      },
  
      // 是否插入到body元素上
      appendToBody: {
        type: Boolean,
        default: false,
      },
  
      // 自定义css类名
      customClass: {
        type: String,
        default: "",
      },
    },
  
    mounted() {
      if (this.appendToBody) {
        document.body.appendChild(this.$el);
      }
  
      if (this.mapKey) {
        this.initMars3d(this.options);
      } else {
        mars3d.Resource.fetchJson({ url: this.url }).then((data) => {
          this.initMars3d(data.map3d); // 构建地图
        });
      }
    },
  
    beforeDestroy() {
      this[`map${this.mapKey}`].destroy();
      delete this[`map${this.mapKey}`];
    },
  
    methods: {
      initMars3d(options) {
        if (this[`map${this.mapKey}`]) {
          this[`map${this.mapKey}`].destroy();
        }
  
        const mapOptions = {
          ...options,
          ...this.options,
        };
  
        // 创建三维地球场景
        var map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions);
  
        this[`map${this.mapKey}`] = map;
  
        console.log(">>>>> 地图创建成功 >>>>", map);
  
        // 挂载到全局对象下，所有组件通过 this.map 访问
        Vue.prototype[`map${this.mapKey}`] = map;
  
        // 绑定对alert的处理，右键弹出信息更美观。
        // window.haoutil = window.haoutil || {}
        // window.haoutil.msg = (msg) => {
        //   this.$message.success(msg)
        // }
        // window.haoutil.alert = (msg) => {
        //   this.$message.success(msg)
        // }
  
        // 抛出事件
        this.$emit("onload", map);
      },
    },
  };
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style>
  .mars3d-container {
    height: 100%;
    overflow: hidden;
  }
  
  /* 重写Cesium的css */
  
  /**cesium按钮背景色*/
  .cesium-button {
    background-color: #3f4854;
    color: #e6e6e6;
    fill: #e6e6e6;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    line-height: 32px;
  }
  
  .cesium-viewer-geocoderContainer .cesium-geocoder-input {
    background-color: rgba(63, 72, 84, 0.7);
  }
  
  .cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
    background-color: rgba(63, 72, 84, 0.9);
  }
  
  .cesium-viewer-geocoderContainer .search-results {
    background-color: #3f4854;
  }
  
  .cesium-geocoder-searchButton {
    background-color: #3f4854;
  }
  
  .cesium-infoBox-title {
    background-color: #3f4854;
  }
  
  .cesium-infoBox {
    background: rgba(63, 72, 84, 0.9);
  }
  
  .cesium-toolbar-button img {
    height: 100%;
  }
  
  .cesium-performanceDisplay-defaultContainer {
    top: auto;
    bottom: 35px;
    right: 50px;
  }
  .cesium-performanceDisplay-ms,
  .cesium-performanceDisplay-fps {
    color: #fff;
  }
  
  /**cesium工具栏位置*/
  .cesium-viewer-toolbar {
    top: auto;
    left: auto;
    right: 12px;
    bottom: 35px;
  }
  
  .cesium-viewer-toolbar > .cesium-toolbar-button,
  .cesium-navigationHelpButton-wrapper,
  .cesium-viewer-geocoderContainer {
    margin-bottom: 5px;
    float: right;
    clear: both;
    text-align: center;
  }
  
  .cesium-baseLayerPicker-dropDown {
    bottom: 0;
    right: 40px;
    max-height: 700px;
    margin-bottom: 5px;
  }
  
  .cesium-navigation-help {
    top: auto;
    bottom: 0;
    right: 40px;
    transform-origin: right bottom;
  }
  
  .cesium-sceneModePicker-wrapper {
    width: auto;
  }
  
  .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
    float: left;
    margin: 0 3px;
  }
  
  .cesium-viewer-geocoderContainer .search-results {
    left: 0;
    right: 40px;
    width: auto;
    z-index: 9999;
  }
  
  .cesium-infoBox-title {
    background-color: #3f4854;
  }
  
  .cesium-infoBox {
    top: 50px;
    background: rgba(63, 72, 84, 0.9);
  }
  
  /**左下工具栏菜单*/
  .toolbar-dropdown-menu-div {
    background: rgba(43, 44, 47, 0.8);
    border: 1px solid #2b2c2f;
    z-index: 991;
    position: absolute;
    right: 60px;
    bottom: 40px;
    display: none;
  }
  
  .toolbar-dropdown-menu {
    min-width: 110px;
    padding: 0;
  }
  .toolbar-dropdown-menu > li {
    padding: 0 3px;
    margin: 2px 0;
  }
  .toolbar-dropdown-menu > li > a {
    color: #edffff;
    display: block;
    padding: 4px 10px;
    clear: both;
    font-weight: normal;
    line-height: 1.6;
    white-space: nowrap;
    text-decoration: none;
  }
  
  .toolbar-dropdown-menu > li > a:hover,
  .dropdown-menu > li > a:focus {
    color: #fff;
    background-color: #444d59;
  }
  
  .toolbar-dropdown-menu > .active > a,
  .dropdown-menu > .active > a:hover,
  .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #444d59;
  }
  .marsBlackPanel .mars3d-popup-close-button {
    color: #fff ;
  }
  .toolbar-dropdown-menu i {
    padding-right: 5px;
  }
  </style>
  
  